<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>


<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentHeader.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/css/limitless/default/animate.jsp"%>
<style type="text/css">
	body{
		padding:20px 20px 60px 20px !important;
	}
</style>

<!-- Bootstrap file input -->
<div class="panel panel-flat">
	<div class="panel-heading">
		<h5 class="panel-title">Bootstrap file input</h5>
		<div class="heading-elements">
			<ul class="icons-list">
              		<li><a data-action="collapse"></a></li>
              		<li><a data-action="reload"></a></li>
              		<li><a data-action="close"></a></li>
              	</ul>
             	</div>
	</div>

	<div class="panel-body">
		<p class="content-group">Bootstrap <code>file input</code> plugin enhances the HTML 5 file input for Bootstrap 3.x into an advanced widget with file preview for various files, multiple selection and more. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a wide variety of files i.e. images, text, html, video, audio, flash, and objects.</p>

		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Single file upload:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input">
					<span class="help-block">Automatically convert a file input to a bootstrap file input widget by setting its class as <code>file-input</code>.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Multiple file upload:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input" multiple="multiple">
					<span class="help-block">Automatically convert a file input to a bootstrap file input widget by setting its class as <code>file-input</code>.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Hidden thumbnails:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input" data-show-preview="false">
					<span class="help-block">Hide file preview thumbnails.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Using data-attributes:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input" multiple="multiple" data-show-upload="false" data-show-caption="true" data-show-preview="true">
					<span class="help-block">Use file input attributes (e.g. multiple upload) for setting input behavior and data attributes to control plugin options. For example, hide/show display of upload button and caption.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Disabled input:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input" disabled="disabled">
					<span class="help-block">Set the file input widget to be <code>readonly</code> or <code>disabled</code>.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Hidden caption:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input" data-show-caption="false" data-show-upload="false">
					<span class="help-block">Hide the caption and display widget with only buttons.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Input group sizing:</label>
				<div class="col-lg-10">
					<div class="form-group">
						<input type="file" class="file-input" data-show-caption="true" data-main-class="input-group-lg">
						<span class="help-block">Large file input</span>
					</div>

					<div class="form-group">
						<input type="file" class="file-input" data-main-class="input-group">
						<span class="help-block">Default file input</span>
					</div>

					<div class="form-group">
						<input type="file" class="file-input" data-main-class="input-group-sm">
						<span class="help-block">Small file input</span>
					</div>

					<div class="form-group">
						<input type="file" class="file-input" data-main-class="input-group-xs">
						<span class="help-block">Mini file input</span>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Input button sizing:</label>
				<div class="col-lg-10">
					<div class="form-group form-group-lg">
						<input type="file" class="file-input" data-show-caption="false" data-show-upload="false" data-browse-class="btn btn-primary btn-lg" data-remove-class="btn btn-default btn-lg">
						<span class="help-block">Large file input button</span>
					</div>

					<div class="form-group">
						<input type="file" class="file-input" data-show-caption="false" data-show-upload="false" data-browse-class="btn btn-primary" data-remove-class="btn btn-default">
						<span class="help-block">Default file input button</span>
					</div>

					<div class="form-group">
						<input type="file" class="file-input" data-show-caption="false" data-show-upload="false" data-browse-class="btn btn-primary btn-sm" data-remove-class="btn btn-default btn-sm">
						<span class="help-block">Small file input button</span>
					</div>

					<div class="form-group">
						<input type="file" class="file-input" data-show-caption="false" data-show-upload="false" data-browse-class="btn btn-primary btn-xs" data-remove-class="btn btn-default btn-xs">
						<span class="help-block">Mini file input button</span>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Overwrite styles:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input-custom" data-show-caption="true" data-show-upload="true" accept="image/*">
					<span class="help-block">Show only image files for selection &amp; preview. Control button labels, styles, and icons for the browse, upload, and remove buttons.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Templates modification:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input-advanced" multiple="multiple">
					<span class="help-block">Advanced customization using templates. For example, change position of buttons from right to left.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Specify file extensions:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input-extensions">
					<span class="help-block">Allow only specific file extensions. In this example only <code>jpg</code>, <code>gif</code>, <code>png</code> and <code>txt</code> extensions are allowed.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Specify file types:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input"data-browse-class="btn btn-primary" data-remove-class="btn btn-default" accept="image/*, video/*">
					<span class="help-block">Allow only <code>image</code> and <code>video</code> file types to be uploaded. You can configure the condition for validating the file types using <code>`fileTypeSettings`</code>.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Always display preview:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input-preview" data-show-remove="true">
					<span class="help-block">Set maximum file upload size to 100 KB. Display preview on load with preset files/images and captions with <code>overwriteInitial</code> set to <code>false</code>. So the initial preview is always displayed when additional files are overwritten (useful for multiple upload) scenario.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Overwrite preview:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input-overwrite">
					<span class="help-block">Display preview on load with preset files/images and captions with <code>overwriteInitial</code> set to <code>true</code>.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Block button:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input" data-browse-class="btn btn-primary btn-block" data-show-remove="false" data-show-caption="false" data-show-upload="false">
					<span class="help-block">Display the widget as a single block button.</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">Using plugin methods:</label>
				<div class="col-lg-10">
					<p><input type="file" class="file-input" id="file-input-methods" data-browse-class="btn btn-primary" data-main-class="input-group" data-show-remove="true" data-show-caption="true" data-show-upload="true"></p>
					<button type="button" class="btn btn-success" id="btn-modify">Disable file input</button>
					<span class="help-block">Using plugin methods to alter input at runtime. For example, click the <code>Modify</code> button to disable the plugin and change plugin options..</span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-lg-2 control-label text-semibold">AJAX upload:</label>
				<div class="col-lg-10">
					<input type="file" class="file-input-ajax" multiple="multiple">
					<span class="help-block">This scenario uses asynchronous/parallel uploads. Uploading itself is turned off in live preview.</span>
				</div>
			</div>
		</form>
	</div>
</div>
<!-- /bootstrap file input -->

<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/uploaders/uploaders.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/pages/fileUploader/uploader_bootstrap.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentFooter.jsp"%>
